<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
		<title>compono core.js</title>
		<script type="text/javascript" src="../../3.Current/2.0.0.0.0/core.js"></script>
		<script type="text/javascript" src="slider.js"></script>

		<style type="text/css">
			body{
				margin:0 3em;
			}
			input{
				font-size:2em;
			}
			
			input[type="text"]{
				font-weight:bolder;
				margin:1em 3em 0 0;
			}
			
			div.slider
				{
				background:transparent url(slider.png) repeat-x 0 -50px;
				/*display:none;*/
				position:absolute;
				padding:10px;
				-webkit-box-shadow: 2px 2px 2px #888;
				}
			div.slider div.min,
			div.slider div.max
				{
				width:15px;
				height:10px;
				background:transparent url(slider.png) no-repeat;
				float:left;
				}
			div.slider div.max
				{
				background-position:0 -16px;
				}
			div.slider div.rail
				{
				background:#727272 url(repeater.gif) repeat-x;
				float:left;
				height:5px;
				position:relative;
				margin:2px 10px 0;
				
				width:500px;
				
				}
			div.slider span
				{
				display:block;
				height:14px;
				width:15px;
				margin:-5px 0 0 -7.5px;
				background:transparent url(slider.png) no-repeat 0 -33px;
				position:relative;
				border-left:0;
				border-top:0;
				}
				
			H2{
				color:#137E4E;
				font-family:Calibri,Helvetica,Arial,sans-serif;
				font-size:2.4em;
				font-size-adjust:none;
				font-stretch:normal;
				font-style:normal;
				font-variant:normal;
				font-weight:bold;
				letter-spacing:-1px;
				line-height:normal;
				margin:0pt;
				padding:40px 0pt 0pt;
				text-align:left;	

			}
				
		</style>
		<script type="text/javascript">
			
		/*
			
			
			
			compono.NavigationHash = compono.Static({
				hash:{},
				set:function(h){
					return window.location.hash = h;
				},
				get:function(h){
					return window.location.hash.substr(1);
				},
				add:function(h,f,s){
					this.hash[h] = {_function:f,_scope:(s||window)};
				},
				remove:function(h){
					delete this.hash[h];
					this.set("");
				},
				init:function(){
					var h = this.get();
					if(	this.hash.hasOwnProperty(h)&&
						typeof(this.hash[h]._function)=="function"){
							this.hash[h]._function.call(this.hash[h]._scope)
					}
				}
			})
			
			compono.ready(compono.NavigationHash.init, compono.NavigationHash);
			
			compono.NavigationHash.add("sign",function(){
				console.log(this);
			},document)
			
			
			
			

			compono.ui.Calendar.monthString = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AGU","SEP","OCT","NOV","DEZ"];
			compono.ui.Calendar.today = new Date();
			
			var calendar;
			calendar = new compono.ui.Calendar();
			calendar.bind($("calendarField"));
			calendar.monthString = ["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"];
			calendar.today = new Date(03,05,2008);
			calendar.format = "mm/dd/yyyy";
			calendar.show();
			calendar.hide();
			calendar.value = new Date(05,05,2008);
			calendar.onChange = function(){}
			calendar.onInput = function(){}
			calendar.onShow = function(){}
			calendar.onHide = function(){}
			calendar.run();
	*/


			compono.ready(function(){
				
				field = new compono.ui.Slider();
				field.onChange = function(){}
				field.onInput = function(){}
				field.onShow = function(){
					this.html.border="1px solid red";
				}
				field.onHide = function(){
					this.html.border="1px solid blue";
				}
				field.run($("rField"));
/*
				
				
				field1 = new compono.ui.Slider();
				field1.min = 0;
				field1.step = 50;
				field1.max = 500;
				field1.template = "{value}%";
				field1.onChange = function(){}
				field1.onInput = function(){}
				field1.onShow = function(){
					this.html.border="1px solid red";
				}
				field1.onHide = function(){
					this.html.border="1px solid blue";
				}
				field1.run($("oField"));
				*/
				
				field2 = new compono.ui.Slider($("pRange")).run()
				
				
			});
			
			
			
		</script>		
		
   </head>
   <body>
		<h2>The quick brown fox jumps over the lazy dog. Jackdaws love my big sphinx of quartz. 0123456789 (.,:;-*!?')</h2>
		<input type="text" id="rField" size="3" name="nField" />
		<input type="text" id="oField" size="3" name="pField" />
		
		<br /><br /><br /><br /><br />
		
		<input id="pRange" type="range" max="100" min="0" step="10" value="50" oninput="alert(this.value)" />
		
		<div id="pannel">
		
		</div>
		
   </body>
</html>